<template>
  <div class="bg-dark-card rounded-xl p-6 card-shadow h-80">
    <h3 class="text-lg font-semibold text-white mb-6">ECharts 测试</h3>
    <div id="testChart" class="w-full h-64"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  // 初始化测试图表
  const testChart = echarts.init(document.getElementById('testChart')!);
  
  // 设置图表配置，与Dashboard中的测试执行趋势图表配置基本相同
  testChart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(45, 55, 72, 0.9)',
      borderColor: '#4b5563',
      textStyle: {
        color: '#e5e7eb'
      }
    },
    legend: {
      data: ['通过', '失败'],
      textStyle: {
        color: '#9CA3AF'
      },
      top: 10,
      right: 20
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#4b5563'
        }
      },
      axisLabel: {
        color: '#9CA3AF'
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      max: 35,
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#9CA3AF'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(156, 163, 175, 0.1)'
        }
      }
    },
    series: [
      {
        name: '通过',
        type: 'line',
        data: [20, 25, 23, 32, 28, 15, 26],
        smooth: true,
        lineStyle: {
          color: '#52C41A',
          width: 3
        },
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#52C41A'
        },
        emphasis: {
          focus: 'series'
        }
      },
      {
        name: '失败',
        type: 'line',
        data: [5, 4, 6, 5, 7, 3, 6],
        smooth: true,
        lineStyle: {
          color: '#FF4D4F',
          width: 3
        },
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#FF4D4F'
        },
        emphasis: {
          focus: 'series'
        }
      }
    ]
  });

  // 窗口大小变化时重新调整图表大小
  window.addEventListener('resize', () => {
    testChart.resize();
  });
});
</script>

<style scoped>
.card-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.bg-dark-card {
  background-color: #272E3B;
}
</style>